<template>
  <div class="nutrition">
    <div class="title border-bottom">
      <div class="left">营养</div>
      <div class="right">
        <a href="#">
          <span>更多</span>
          <i class="iconfont">&#xe600;</i>
        </a>
      </div>
    </div>
    <div class="nu-center">
      <ul>
        <li class="border-rightbottom" v-for="item of imgList" :key="item.id">
          <img :src="item.imgUrl" alt="">
        </li>
      </ul>
    </div>
    <div class="nu-bottom">
      <img src="https://img2.yidejia.com/4/2019/03/09/39a805bb28b5e.jpg" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeNutrition',
  data () {
    return {
      imgList: [
        {
          id: '001',
          imgUrl: 'http://img2.yidejia.com/7/2019/03/08/134d810cbd20.jpg'
        },
        {
          id: '002',
          imgUrl: 'http://img2.yidejia.com/5/2019/03/08/c1193aa94570.jpg'
        },
        {
          id: '003',
          imgUrl: 'http://img2.yidejia.com/8/2019/03/08/c12e0c6b3922.jpg'
        },
        {
          id: '004',
          imgUrl: 'http://img2.yidejia.com/4/2019/03/08/135246f1c445.jpg'
        },
        {
          id: '005',
          imgUrl: 'http://img2.yidejia.com/6/2019/03/08/c147708e1394.jpg'
        },
        {
          id: '006',
          imgUrl: 'http://img2.yidejia.com/5/2019/03/08/1354d9a2f415.jpg'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .nutrition
    width 100%
    height 0
    overflow hidden
    padding-bottom 125.29%
    margin-top .2rem
    .title
      height .96rem
      line-height .96rem
      background #ffffff
      .left
        float left
        font-size .4rem
        font-weight 400
        &::before
          content ' '
          display inline-block
          width .07rem
          height .42rem
          background $bgColor
          position relative
          top .06rem
          margin 0 .12rem 0 .2rem
      .right
        float right
        font-size .325rem
        margin-right .25rem
        a
          color #9f9f9f
          span
            position: relative
            left .1rem
            top .02rem
          i
            float right
            font-size .65rem

    .nu-center
      height 6.566rem
      ul
        height 100%
        display flex
        flex-wrap wrap
        li
          height 50%
          width 33.33%
    .nu-bottom
      height 1.876rem
    img
      width 100%
      height 100%
</style>
